<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div id="map"></div>
    </div>
</template>
<script>
import muchpoint from "../../public/data/much_points"
export default {
    data () {
        return {
            map:null,
            popup:null
        }
    },
    mounted(){
       this.init()
    },
    methods: {
        init(){
            this.smartmapx.mapbase="http://www.smartmapx.com";
            this.smartmapx.apikey="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8"
            this.map=new this.smartmapx.Map({
              container:'map',
              mapId:'2add4026-4a41-4d42-8ae2-34604436cc4e',
              center:[116.39738, 39.90579],
              zoom:10,
              maxZoom:12,
              minZoom:6
            })
            var nav = new this.smartmapx.NavigationControl();
            this.map.addControl(nav, 'top-right');

            // 添加比例尺
            this.map.addControl(new this.smartmapx.ScaleControl({
                    maxWidth: 100,
                    unit: 'm'
                }));
            this.popup = new this.smartmapx.Popup({
                    closeButton: false,
                    anchor:'bottom'
                });
            this.map.on('load',()=>{
                this.map.addSource('addpoint', {
                    type: 'geojson',
                    data: muchpoint
                });
                this.map.addLayer({
                    'id': 'point-outline',
                    'type': 'circle',
                    'source': 'addpoint',
                    'filter': ['any',
                        ['!has', 'selected'],
                        ['!=', 'selected', true]
                    ],
                    'paint': {
                        'circle-radius': 6,
                        'circle-color': '#ff4040'
                    }
                });
                this.map.addLayer({
                    'id': 'pointLayer',
                    'type': 'circle',
                    'source': 'addpoint',
                    'filter': ['any',
                        ['!has', 'selected'],
                        ['!=', 'selected', true]
                    ],
                    'paint': {
                        'circle-radius': 4,
                        'circle-color': '#fff'
                    }
                });

                this.map.addLayer({
                    'id': 'pointLayer-outline-selected',
                    'type': 'circle',
                    'source': 'addpoint',
                    'filter': ['all',
                        ['has', 'selected'],
                        ['==', 'selected', true]
                    ],
                    'paint': {
                        'circle-radius': 7,
                        'circle-color': '#fff'
                    }
                });
                this.map.addLayer({
                    'id': 'pointLayer-selected',
                    'type': 'circle',
                    'source': 'addpoint',
                    'filter': ['all',
                        ['has', 'selected'],
                        ['==', 'selected', true]
                    ],
                    'paint': {
                        'circle-radius': 5,
                        'circle-color': '#ff4040'
                    }
                });
                this.map.on('mouseenter','pointLayer',(e)=>{
                    if(muchpoint && muchpoint.features.length && e.features && e.features.length){
                            var selectedId = e.features[0].properties.id;
                            muchpoint.features.forEach(element => {
                                if(element.properties.id == selectedId){
                                          element.properties['selected'] = true;
                                }else {
                                     delete element.properties['selected'];
                                }
                            });
                        this.map.getSource('addpoint').setData(muchpoint);
                        this.popup.setLngLat(e.lngLat)
                            .setText(e.features[0].properties.name)
                            .addTo(this.map);
                    }
                })
            })  
        }
    }
}
</script>
<style scoped>
#map{
    width:100%;
    height:100%
}
</style>